<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件车</title>
</head>
<body>
<div id="app">
  <brother1></brother1>
  <brother2></brother2>
</div>


</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  let eventBus = new Vue;

  let brother1 = {
    template: `<div>{{color}}<button @click="change">变绿</button></div>`,
    data(){
      return {color:'绿色',old:'绿色'}
    },
    created() {
      eventBus.$on('changeRed',(val) => { //页面1 加载兄弟1
        this.color = val;
      })
    },
    methods: {
      change(){
        eventBus.$emit('changeGreen',this.old)
      }
    }
  };

  let brother2 = {
    template: `<div>{{color}}<button @click="change">变红</button></div>`,
    data(){
      return {color:'红色',old:'红色'}
    },
    methods: {
      change(){
        eventBus.$emit('changeRed',this.old)
      }
    },created() {
      eventBus.$on('changeGreen',(val) => { //页面1 加载兄弟1
        this.color = val;
      })
    },
  };

  let vm = new Vue({
    el: '#app',
    data: {
    },
    components: {
      brother1,brother2
    }
  })

</script>
</html>
